<script setup lang="ts">
import type {
  FormDesignerComponents,
  FormItemPerm
} from "../FormComponentMixin";
import { getRandNodeId } from "@/utils/process";
import { isReadonly } from "../FormItem";
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  }
});

const _value = defineModel<string>();
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");
const fileUploadRef = ref(null);
const mounted = ref(false);

const disabled = computed(() => {
  if (props.mode === "disable" && isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

const readonly = computed(() => {
  if (props.mode === "read" || isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

const init = () => {
  if (mounted.value) {
    nextTick(() => {
      fileUploadRef.value.init({ objectId: _value.value });
      fileUploadRef.value.load();
    });
  }
};

watchEffect(() => {
  if (_value.value) {
    init();
  }
});

onMounted(() => {
  mounted.value = true;
  if (!_value.value) {
    _value.value = getRandNodeId();
  }
});
</script>
<template>
  <div v-if="mounted" style="width: 100%">
    <el-input v-model="_value" placeholder="" v-show="false"></el-input>
    <BaseFileUpload
      ref="fileUploadRef"
      :disabled="disabled || readonly"
      :accept="config.props.accept"
      :limit="config.props.limit"
      :size="config.props.size"
      :autoUpload="true"
    />
  </div>
</template>

<style scoped></style>
